import React from 'react';
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import News from '../News'
import Index from '../Index'
import ProFile from '../ProFile'
import HouseList from '../HouseList'
import './index.css'

const tabBarItems = [
  {
    id: 0,
    title: '首页',
    path: '/home',
    icon: 'iconfont icon-hkshouye',
  },
  {
    id: 1,
    title: '找房',
    path: '/home/houselist',
    icon: 'iconfont icon-hksousuo1',
  },
  {
    id: 2,
    title: '咨询',
    path: '/home/news',
    icon: 'iconfont icon-hkyuedu',
  },
  {
    id: 3,
    title: '我的',
    path: '/home/profile',
    icon: 'iconfont icon-hkwode',
  },
]
class Home extends React.Component {
  state = {
    // 默认高亮
    selectedTab: this.props.location.pathname,
    // 是否隐藏TabBar
    hidden: false,
    // 是否全屏显示
    fullScreen: true,
  };
  renderTabBar() {
    return tabBarItems.map(item => 
       <TabBar.Item
          title={item.title}
          key={item.id}
          icon={<i className={item.icon}/>}
          selectedIcon={<i className={item.icon}/>}
          selected={this.state.selectedTab === item.path}
          // badge={1} 图标通知条数
          // tabbar点击事件
          onPress={() => {
            this.props.history.push(item.path)
            this.setState({
              selectedTab: item.path,
            });
          }}
        >
        </TabBar.Item>
    )
  }
  render() {

    return (
      <div className="home">
        <TabBar
          // 未选中颜色
          unselectedTintColor="#888"
          // 选中颜色
          tintColor="#21b97a"
          barTintColor="white"
        >
         {this.renderTabBar()}
        </TabBar>
        {/* 路由出口 */}
        <Route path='/home/news' component={News}></Route>
        <Route path='/home/houselist' component={HouseList}></Route>
        <Route path='/home/profile' component={ProFile}></Route>
        <Route path='/home' exact component={Index}></Route>
      </div>
    )
  }
}

export default  Home